<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>logining</title>
    <link href="assets/stylesheets/bootstrap.min.css" rel = "stylesheet">
    <style type="text/css">
      .row { margin-left:0px; margin-right:0px;}
      .container { padding-left:0px;padding-right:0px;}
      #loading img, #logo img { width: 100%; background: transparent; }
      #text a, #text { color: #e0e0e0; font-size:12px;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div id="loading" class="col-xs-12">
          <img src="assets/images/login_loading.gif">
        </div>
      </div>
      <div id="text" class="row" style="width:100%;text-align:center;">
        <div id="refreshBtn" class="col-xs-12" style="display:none;">
          <a onclick="Loading.refresh();">重新加载</a>
        </div>
      </div>
      <div id="logo" class="row" style="position:absolute;bottom:0px;">
        <div class="col-xs-12">
          <img src="assets/images/login_logo.png">
        </div>
      </div>
    </div>

    <script type="text/javascript">
      (function(){
        window.Mobile = {
          isIOS: function() {
            return navigator.userAgent.match(/iPhone|iPad/i);
          },
          isAndroid: function() {
            return navigator.userAgent.match(/Android/i);
          }
        }
        window.Loading = {
          countDownIndex: 0,
          countDownTimer: null,
          connectWebViewJavascriptBridge: function(callback) {
            if(window.WebViewJavascriptBridge) {
              callback(WebViewJavascriptBridge)
            }
            else {
              document.addEventListener('WebViewJavascriptBridgeReady', function() {
                callback(WebViewJavascriptBridge)
              }, false)
            }
          },
          refresh: function() {
            if(Mobile.isIOS()) {
              Loading.connectWebViewJavascriptBridge(function(bridge){
                bridge.callHandler('refreshBrowser', {}, function(response) {
                });
              });
            }
            else if(Mobile.isAndroid()) {
              window.AndroidJSBridge.refreshBrowser();
            }
            else {
              alert("未知浏览器:" + navigator.userAgent);
            }
          },
          countDownRecorder: function() {
            Loading.countDownIndex += 1;
            if(Loading.countDownIndex > 10) {
              document.getElementById("refreshBtn").style.display = "block";
              Loading.clearCountDownTimer();
            }

            console.log("timer: " + Loading.countDownIndex);
          },
          startCountDownTimer: function() {
            Loading.countDownTimer = self.setInterval("Loading.countDownRecorder();", 1000); 
          },
          clearCountDownTimer: function() {
            window.clearInterval(Loading.countDownTimer);
          }
        }
      }).call(this);

      window.onload = function() {
        var body = document.getElementsByTagName("body")[0];
        var logo = document.getElementById("logo");
        var loading = document.getElementById("loading");
        var text = document.getElementById("text");

        var body_height = body.clientHeight;
        var logo_height = logo.clientHeight;
        var loading_height = loading.clientHeight;
        var text_height = text.clientHeight;

        var rest_height = body_height - (text_height + logo_height + loading_height);
        
        if(rest_height > 0) {
          logo.style.position = "absolute";
          logo.style.bottom = rest_height/2 + "px";

          text.style.position = "absolute";
          text.style.bottom = (logo_height + rest_height/2) + "px";

          loading.style.position = "absolute";
          loading.style.bottom = (logo_height + text_height + rest_height/2) + "px";
        }

        Loading.startCountDownTimer();
      }
    </script>

  </body>
</html>